<template>
	<div class="message" >
		<h2>留言<span class="more"><i class="iconfont icon-tianjia"></i></span></h2>
		<div class="ratings" v-for="item in ratings">
			<s-user-list-top :data="item.user" :small="true" @getUserInfo="handleGetUserInfo"></s-user-list-top>
			<div class="rating-content">
				<!--第一个回复者-->
				<div class="rating-content__say" @click="replay(item.user.name)">{{item.says}}</div>
				<!--其他回复者-->
				<div class="rating-content__reply" v-for="item2 in item.replay">
					<s-user-list-top :data="item2.user" :small="true" @getUserInfo="handleGetUserInfo"></s-user-list-top>
					<div class="rating-content__reply--detail" @click="replay(item2.user.name)">
						<span>回复@{{item2.to}}:&nbsp;</span>
						<span>{{item2.says}}</span>
					</div>
				</div>		
			</div>
		</div>
		<div class="message__bottom" v-show="showSendMsg">
			<input 
				ref="ratings_ipt"
				@blur="handleBlur"
				type="text" 
				v-model="msg"
				class="message__bottom--ipt" 
				:placeholder="placeholder"/>
			<button class="message__bottom--send" @click="sendMsg">发送</button>
		</div>
	</div>
</template>

<script>
	import { fetchRatings } from "../../../../api/api.js"
	export default {
		data() {
			return {
				showSendMsg: false,
				placeholder: "",
				msg: "",				//要发送的留言
				ratings: null,			//所有留言		
			}
		},
		created() {
			this.getRatings();
		},
		methods: {
			//跳转到用户个人信息
			handleGetUserInfo(id) {
				this.$router.push("/user_info");
			},
			//回复用户
			replay(name) {
				this.msg = "";
				this.showSendMsg = true;
				this.placeholder = `回复@${name}`;
				this.$nextTick( () => {
					this.$refs["ratings_ipt"].focus();
				} );
			},
			//失去焦点的时候
			handleBlur() {
				this.showSendMsg = false;
			},
			//发送评论
			sendMsg() {
				console.log('发送消息')
			},
			getRatings() {
				fetchRatings().then( res => {
					this.ratings = res.data.result;
				} ).catch( err => {
					alert(err);
					console.log(err);
				} );
			}
		}
	}
</script>

<style lang="scss" scoped>
	.message {
		@include index_title;
		border-bottom: 0;
	}
	.ratings {
		padding: $com-padding-lr-base;
	}
	.ratings:not(:last-child ){
		border-bottom: 2px solid $gray-lighter;
	}
	.rating-content {
		padding-left: 2rem;
		font-size: $font-xs;
		letter-spacing: 1px;
		line-height: 1.5;
	}
	.rating-content__say {
		padding: rem(8) 0;
		border-bottom: 1px dashed #eee;
	}
	.rating-content__reply {
		padding: rem(10) 0;
		
	}
	.rating-content__reply:not(:last-of-type) {
		border-bottom: 1px dashed #eee;
	}
	.rating-content__reply--detail {
		margin-left: 2rem;
	}
	.message__bottom {
		border-top: 1px solid #eee;
		position: fixed;
		bottom: 0;
		height: 3rem;
		width: 100%;
		background: rgba(255,255,255, .9);
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.message__bottom--ipt {
		background: #f6f6f6;
		height: 60%;
		border: none;	
		font-size: $font-sm;
		padding-left: 1rem;
		border-radius: rem(4);
	}
	.message__bottom--send {
		height: 60%;
		border: none;
		padding: 0 1rem;
		color: #eee;
		background: $blue-light;
	}
</style>
